<template>
  <div class="userInfo">
      <div class="userIns">
          <img :src="user.hdportrait" alt="">
          <div class="userName">{{user.nickname}}</div>
          <div class="userQianMing">{{user.signature}}</div>
      </div>
      <div class="userData">
          <div class="userArticle">文章</div>
          <div class="label">标签</div>
          <div class="article-num"><router-link to="/guiDan">{{0 && user.articlenum}}</router-link></div>
          <div class="labek-num"><router-link to="/guiDan">{{0 && user.labelnum}}</router-link></div>
      </div>
      <div class="userContact">
          <a href="javascript:void(0)">
            <el-tooltip content="qq" placement="bottom" effect="light">
                <span class="iconfont">&#xe876;</span>
            </el-tooltip>
          </a>
          <a href="javascript:void(0)">
              <el-tooltip content="github" placement="bottom" effect="light">
              <span class="iconfont">&#xe534;</span>
              </el-tooltip>
            </a>
          <a href="javascript:void(0)">
              <el-tooltip content="wx" placement="bottom" effect="light">
                <span class="iconfont">&#xe6db;</span>
              </el-tooltip>
            </a>
          <a href="javascript:void(0)">
              <el-tooltip content="bilibili" placement="bottom" effect="light">
              <span class="iconfont">&#xe62a;</span>
              </el-tooltip>
            </a>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            user: {
                uid: 1,
                nickname: "还未登录",
                signature: "...",
                sex: "男",
                hdportrait: require("@/assets/img/me.jpg")
            },
        }
    },
    computed: {
        
    },
    inject: ['userData'],
    created() {
        
        // 从App.vue 传来的异步数据，用户信息
        this.userData().then(res => {
            this.user = res.data.result[0]
        })

    },
}
</script>

<style scoped>
    .userStick {
        position: fixed;
        top: 5.5rem;
    }
    .userInfo {
        position: sticky;
        top: 80.05px;
        width: 15.625rem;
        border-radius: 11px;
        padding: 20px 20px 0;
        font-weight: 600;
        font-family: serif;
        box-shadow: 0 1px 20px -8px var(--shadow);
        transition: box-shadow .5s;
        font-size: var(--fontSize);
        background-color: var(--defaultColor);
    }
    .userInfo:hover {
        box-shadow: 0 0 20px var(--hshadow);
    }
    .userInfo div {
        margin: 5px 0;
    }
    .userInfo .userIns {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .userInfo .userIns img {
        display: block;
        margin: 0 auto;
        width: 7.5rem;
        border-radius: 50%;
    }
    .userData div {
        text-align: center;
        display: inline-block;
        width: 6.25rem;
    }
    .userData {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px dotted #ccc;
    }
    .userContact {
        display: flex;
    }
    .userContact a {
        display: inline-block;
        flex: 1;
        text-align: center;
        line-height: 50px;
    }
    .userContact a:hover {
        color: orange;
    }
    .userContact a span {
        font-size: 25px;
    }
    @media screen and (max-width:768px) {
        .userData {
            display: none;
        }
        .userContact {
            display: none;
        }
        .userInfo {
            position: static;
            width: 100%;
            box-shadow: none;
        }
        .userInfo:hover {
            box-shadow: none;
        }
    }
</style>